<template>
  <!--  近2周记录-->
  <div class="container-big">
    <div class="header-top">
      <div class="head-title">
        智能问卷
      </div>
      <changeEnterprise v-model="enterpriseValue"></changeEnterprise>
    </div>
    <div class="formGroup">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="130px" class="">
        <el-button type="primary" size="small" @click="handerAdd" v-hasPermi="['inQuestionList:add']"><i class="el-icon-plus"></i>新建问卷</el-button>
        <el-form-item prop="userName2">
          <div class="search">
            <el-input v-model="queryParams.userName1" placeholder="请输入问卷标题" clearable/>
            <el-button icon="el-icon-search" size="small" @click="handleQuery"></el-button>
          </div>

        </el-form-item>
        <el-form-item prop="userName2">
          <el-form-item prop="userName2">
            <el-select v-model="queryParams.userName2" filterable placeholder="所有状态" @change="handleQuery">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-select v-model="queryParams.userName2" filterable placeholder="所有员工" @change="handleQuery">
            <el-option
              v-for="item in userList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="content-big">
      <div class="content-item">
        <div class="content-top">
          <div class="item title">
            <div class="code">问卷标题</div>
            <div class="content">ID：8424</div>
          </div>
          <div class="item  submitNumber ">
            <div class="code">已提交人数</div>
            <div class="content">ID：8424</div>
          </div>
          <div class="item  clickNumber ">
            <div class="code">总点击人数</div>
            <div class="content">ID：8424</div>
          </div>
          <div class="item status">
            <div class="code">状态</div>
            <div class="content">
              <el-tag type="warning">未发布</el-tag>
            </div>
          </div>
          <div class="item user">
            <div class="code">创建人</div>
            <div class="content">主账号</div>
          </div>
          <div class="item status">
            <div class="code">截止时间</div>
            <div class="content">ID：8424</div>
          </div>
        </div>
        <div class="content-bottom">
          <div class="bottom-left">
            <el-button type="text" v-hasPermi="['inQuestionList:send']" @click="setSend()"><i class="el-icon-sell"></i>发送问卷</el-button>
            <el-dropdown>
              <el-button type="text" v-hasPermi="['inQuestionList:edit']"><i class="el-icon-edit-outline"></i>修改问卷</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleEidt">编辑问卷</el-dropdown-item>
                <el-dropdown-item @click.native="handleNumberEditSet">修改设置</el-dropdown-item>

              </el-dropdown-menu>
            </el-dropdown>
            <el-button type="text" @click="gotoDataAnalysis" v-hasPermi="['inQuestionList:data']"><i class="el-icon-data-line"></i>数据分析</el-button>
          </div>
          <div class="bottom-right">
            <el-button type="primary" plain v-hasPermi="['inQuestionList:publish']">
              <i class="el-icon-plus"></i>发布问卷
            </el-button>
            <el-button type="text" plain v-hasPermi="['inQuestionList:end']">
              <i class="el-icon-switch-button"></i>手动截止
            </el-button>
            <el-button type="text" @click="getPreview" v-hasPermi="['inQuestionList:preview']"><i class="el-icon-view"></i>预览</el-button>
            <el-button type="text" v-hasPermi="['inQuestionList:copy']"><i class="el-icon-document-copy"></i>复制</el-button>
            <el-button type="text" v-hasPermi="['inQuestionList:del']"><i class="el-icon-delete"></i>删除</el-button>
          </div>
        </div>
      </div>
    </div>
    <sendQuestionnaireSet v-if="showSendQuestionnaireSet" :visableIf.sync="showSendQuestionnaireSet"></sendQuestionnaireSet>
    <timeSet v-if="showTimeSet" :visableIf.sync="showTimeSet"></timeSet>
    <preview v-if="showPreview" :visableIf.sync="showPreview"></preview>
  </div>
</template>

<script>
import {listUser, delUser,} from "@/api/system/user";

export default {
  name: "inQuestionList",
  components: {
    'sendQuestionnaireSet': () => import('./sendQuestionnaireSet.vue'),//导出弹窗
    'timeSet': () => import('./timeSet.vue'),//导出弹窗
    'preview': () => import('./preview.vue'),//导出弹窗
    'changeEnterprise':()=> import('@/views/components/changeEnterprise.vue'),

  },
  data() {
    return {
      value:'',
      showDeduplication: false,
      showSendQuestionnaireSet:false,
      showTimeSet:false,//修改设置
      showPreview:false,
      enterpriseValue:1,//获取企业的值
      enterpriseList:[
        {value:1,label:'锐行'},
        {value:2,label:'志新'},
      ],
      statusList: [
        {
          value: '0',
          label: '所有状态'
        }, {
          value: '1',
          label: '未发布'
        }, {
          value: '2',
          label: '已发布'
        }, {
          value: '3',
          label: '已截止'
        }
      ],
      userList: [
        {
          value: '1',
          label: '已完成'
        }, {
          value: '1',
          label: '未完成'
        }
      ],
      showAddBlackByUser: false,//按客户添加
      showAddEnterpriseBlack: false,//企业自动添加
      showSetClearBlack: false,//应用
      showSetChatBlack: false,//
      active: 0,
      visible: false,
      dateRange1: [],//添加时间
      dateRange2: [],//触发时间
      dialogType: 'add',
      showExportPage: false,//导出
      tableHeight: 600,
      tableDataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        userName2: null,
        pageSize: 10,
        id: null,//用户id
        userName1: null,

      },
      total: 8, // 表格的总条数
    };
  },
  created() {
    // this.getList();
    this.tableDataList = [];
    for (let i = 0; i < 10; i++) {
      let obj = {
        name: '小红',
        label1: '18207418337',
        label2: '18207418337',
        label3: '18207418337',
        label4: '18207418337',
      }
      this.tableDataList.push(obj);
    }
  },
  methods: {
    handerSet() {
      console.log('点击数据');
      this.showDeduplication = true;
    },
    handleEidt(){
      this.$router.push({path: '/customerOperationsMgt/inQuestionMgt/addOrEditInQuestion'})
    },
    handleNumberEditSet(){
      this.showTimeSet=true;
      console.log('showTimeSet',this.showTimeSet);
    },
    handerClear() {
      console.log('点击');
      this.showSetClearBlack = true;
    },
    gotoDataAnalysis(){
      this.$router.push({path: '/customerOperationsMgt/inQuestionMgt/dataAnalysis'})
    },
    getPreview(){
      this.showPreview=true;
    },
    handerAdd() {
      this.$router.push({path: '/customerOperationsMgt/inQuestionMgt/addOrEditInQuestion'})
    },
    setSend(){
      //问卷发送设置
      this.showSendQuestionnaireSet=true;
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.tableDataList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.deptId = undefined;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(val) {
      this.multipleSelection = [];
      if (val && val.length > 0) {
        val.forEach((item) => {
          this.multipleSelection.push(item.id);
        })
        console.log('multipleSelection', this.multipleSelection);
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      //删除
      // const userIds = row.userId || this.ids;
      // this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
      //   return delUser(userIds);
      // }).then(() => {
      //   this.getList();
      //   this.$modal.msgSuccess("删除成功");
      // }).catch(() => {
      // });
      this.$msgBox.showMsgBox({
        title: "是否确认删除？",
        content: "该企微号正在执行服务，删除将会使该号从操作中释放，导致部分功能无法正常使用，请谨慎选择。*如该号已加入在线聊天，成功删除后，聊天记录会被一并删除，重新登录后无法恢复。",
      })
        .then(async (val) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleNumberDelete() {
      this.$modal.confirm('确认清空本页黑名单？').then(function () {
        return delUser(userIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });

    },

  }
};
</script>
<style lang="scss" scoped>
.head-big {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  padding-bottom: 0px;
}

.container-big {
  display: flex;
  height: calc(100vh - 100px);
  margin: 12px;
  background: #fff;
  flex-direction: column;
}

.formGroup {
  width: 100%;
  padding: 10px 20px;
  margin-bottom: 10px;

  .el-form {
    background: #fff;
    border-radius: 8px;
    margin-top: -1px;

    .el-button {
      margin-right: 10px;
    }

    .el-form-item {
      margin-bottom: 0px;

      ::v-deep .el-form-item__content {
        display: flex;

        .el-input {
          width: 150px;
        }
      }

      .right-big {
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        padding-left: 11px;

        > span {
          color: #777;
          width: 89px;
          display: inline-block;
          white-space: nowrap;
        }

        .el-select {
          width: 138px;

          ::v-deep .el-input__inner {
            border: none;
          }
        }

        .el-input {
          width: 138px;

          ::v-deep .el-input__inner {
            border: none;
          }
        }

        ::v-deep .el-date-editor {
          border: none;
        }
      }

    }
  }
}


.header-top {
  height: 46px;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;

  .head-title {
    font-size: 14px;
    line-height: 22px;
    margin-right: 10px;
    font-weight: bold;

    .example-text {
      color: #2f54eb;
      cursor: pointer;
      margin-left: 8px;;
      font-weight: 400;

      &:hover + .example-modal {
        display: block;
      }
    }

    .example-modal {
      position: fixed;
      left: 0;
      margin-top: 10px;
      display: none;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
      background: #FFFFFF;

      .example-cover {
        height: 600px;
      }
    }
  }

  .divider {
    margin: 0 20px;
    width: 1px;
    height: 16px;
  }
}


.head-right {
  .el-dropdown {
    margin-right: 10px;
  }

  .el-button {
    i {
      margin-right: 5px;
    }
  }
}

.other-option {
  height: 30px;
  display: flex;
  align-items: center;
  color: #2d8cf0;
  font-size: 14px;
  margin-left: 15px;
  border-top: 1px solid #eee;
}

.status {
  &.green {
    color: #1ab394;
  }
}
.content-big {
  padding: 10px;
  .content-item {
    font-size: 14px;
    line-height: 26px;
    display: flex;
    justify-content: space-between;
    background-color: #f7f7f7;
    flex-direction: column;
    border: 1px solid #eee;
    margin-bottom: 10px;
    .content-top {
      display: flex;
      padding: 10px 16px;
      .item {
        padding: 0 10px;
        font-size: 14px;
        color: rgba(0, 0, 0, .45);
        line-height: 22px;
        width: 13%;
        .code {
          margin-bottom: 5px;
        }
        &.title {
          flex: 1;
          .code {
            font-weight: bold;
            color: #000;
          }
        }
        &.submitNumber {
          .content {
            color: rgb(255, 130, 67);
            font-weight: bold;
          }
          }
        &.clickNumber {
          .content {
            color: #000;
            font-weight: bold;
          }
        }
      }
    }
    .content-bottom {
      display: flex;
      justify-content: space-between;
      background: #fff;
      padding: 10px 16px;
      .el-button {
        height: 32px;
        padding: 4px 15px;
        i {
          margin-right: 5px;
          font-size: 16px;
        }
      }
      ::v-deep .el-button--text {
        color: #999 !important;
      }
      .bottom-right {
        font-size: 14px;
        color: #000;
        ::v-deep .el-button--text {
          color: #000 !important;
        }
      }

      .bottom-left {

      }
    }
  }

}
.search {
  display: flex;
  ::v-deep.el-input__inner {
    border-right: none !important;
    border-radius: 4px 0px 0px 0px;
  }
  ::v-deep .el-button--default {
    border-radius: 0px 4px 4px 0px;
    padding: 0px 10px;
  }
}
</style>
